<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>网站信息</title>  
    <link rel="stylesheet" href="css/pintuer.css">
    <link rel="stylesheet" href="css/admin.css">
    <script src="js/jquery.js"></script>
    <script src="js/pintuer.js"></script>  
</head>
<style>
	.line {
	width: 80%;
    height: 1px;
    border-top: solid RGB(85, 175, 230) 1px;
    margin: 0 auto;
}
</style>
<body>

<script>
function del(id){
	if(confirm("您确定要删除吗?")){
		
	}
}
var fileCountList = [];
	// 添加视频按钮
	function addVideos() {
		let addDom = "<div class='form-group col-md-12 col-xs-12'>" +
            "<label class='col-md-3 col-xs-12'>请输入课程名称</label>" +
                "<div class='col-md-9 col-xs-12'>" +
                "<input type='text' class='form-control' name='addClassName[]'> " +
                "</div>" +
            "</div>" +
            "<div class='form-group col-md-12 col-xs-12'>" +
                "<label class='col-md-3 col-xs-12'>请选择视频</label>" +
                "<div class='col-md-9 col-xs-12'> " +
                "<input type='file' name='file[]' multiple οnchange='selectVideos(this)'>" +
                "</div>" +
            "</div> " +
            "<div class='form-group col-md-12 col-xs-12'>" +
                "<label class='col-md-3 col-xs-12'>请输入第几节：</label>" +
                "<div class='col-md-9 col-xs-12'>" +
                "<input type='text' class='form-control' name='sort[]' placeholder='第1节就输入1' required>" +
                "</div>" +
            "</div>" +
            "<div class='form-group col-md-12 col-xs-12'>" +
                "<div class='line'></div> " +
            "</div>";
		$('.class').append(addDom)
	}
	// 获取选择视频的个数(因为目前我写的是上传m3u8文件,所以需要用这个来告诉后端每一集有多少个ts文件,如果是上传mp4文件的话,我猜是不用说明这个的,不过我没有尝试过)
	function selectVideos(obj) {
        let fileCount = obj.files.length;
        fileCountList.push(fileCount);
    }
    // 确认提交按钮
    function addSubmit() {
    	// 在使用FormData提交数据的时候,需要用原生的js,不能使用jQuery,如果要使用jQuery获取的话,需要将jQuery获取到的对象转换成原生的DOM节点,具体的可以看我之前的一篇文章
    	// 这个时候如果使用console.log(formData)是看不到数据的,但是不要怀疑,按照下面的操作仍然是可以把数据提交上去的
        let formData = new FormData(document.getElementById('uploadVideosForm'));
        // 向formData中添加数据
        formData.append('fileCountList',fileCountList);
        $.ajax({
            url: '上传视频的路径',
            method: 'post',
            processData: false,
            contentType: false,
            dataType: "json",
            data: formData,
            success: function (data) {
				console.log(data)
            }
        })
    }
    function fanhui(){
    	location.href="showVideo.html"
    }
</script>
<div class="panel admin-panel margin-top">
  <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>增加内容</strong></div>
  <div class="body-content">
    <form method="post" class="form-x" action="">   
      <input type="hidden" name="id"  value="" />
       <div class="form-group">
        <div class="label">
          <label>年纪分类：</label>
        </div>
        <div class="field">
          <select name="pid" class="input w50">
            <option value="">请选择分类</option>
            <option value="">产品分类</option>
            <option value="">产品分类</option>
            <option value="">产品分类</option>
            <option value="">产品分类</option>
          </select>
        </div>
       </div>
       <div class="form-group">
        <div class="label">
          <label>课程分类：</label>
        </div>
        <div class="field">
          <select name="pid" class="input w50">
            <option value="">请选择分类</option>
            <option value="">产品分类</option>
            <option value="">产品分类</option>
            <option value="">产品分类</option>
            <option value="">产品分类</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <div class="label">
          <label>视屏名称：</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" name="title" value="" data-validate="required:请输入标题" />         
          <div class="tips"></div>
        </div>
      </div>
     <div class="form-group ">
     	 <div class="label">
          <label>视屏选择：</label>
       </div>
		    <div class="col-md-9 col-xs-12">
		        <input  onchange="selectVideos(this)" type="file" id="uploadVideos" name="file[]" multiple>
		    </div>
     </div>
        <div class="form-group">
            <div class="label">
                <label>选择章节：</label>
            </div>
            <div class="field">
                <select name="pid" class="input w50">
                    <option value="">请选择分类</option>
                    <option value="">产品分类</option>
                    <option value="">产品分类</option>
                    <option value="">产品分类</option>
                    <option value="">产品分类</option>
                </select>
            </div>
        </div>
     <div class="form-group">
        <div class="label">
          <label>上架：</label>
        </div>
        <div class="field">
          <div class="button-group radio">
          
          <label class="button active">
         	  <span class="icon icon-check"></span>             
              <input name="isshow" value="1" type="radio" checked="checked">是             
          </label>             
        
          <label class="button active"><span class="icon icon-times"></span>          	
              <input name="isshow" value="0"  type="radio" checked="checked">否
          </label>         
           </div>       
        </div>
     </div>      
     <div class="form-group">
        <div class="label">
          <label></label>
        </div>
        <div class="field">
        	<button type="button" class="button bg-main icon-check-square-o" onclick="addVideos()" style="margin-right: 700px">添加视频
		</button>
		<button type="button" onclick="addSubmit()" class="button bg-main icon-check-square-o">确认提交</button>
		<button type="button" class="button bg-main icon-check-square-o" onclick="fanhui()">取消</button>
        </div>
      </div>
    </form>
  </div>
</div>
</body></html>
